namePackage * {
	scrollbar-width: thin;
	scrollbar-color: rgba(119, 119, 119, 0.3) rgba(119, 119, 119, 0.1);
}

namePackage ::-webkit-scrollbar {
	width: 1rem;
	height: 1rem;
}

namePackage ::-webkit-scrollbar-thumb {
	border-radius: 1rem;
	background: rgba(119, 119, 119, 0.3);
}

namePackage ::-webkit-scrollbar-thumb:hover {
	background: rgba(119, 119, 119, 0.4);
}

namePackage ::-webkit-scrollbar-thumb:active {
	background: rgba(119, 119, 119, 1);
}

namePackage ::-webkit-scrollbar-track:hover {
	background: rgba(119, 119, 119, 0.1);
}

namePackage ::-webkit-scrollbar-corner {
	background: transparent;
}



namePackage {
	--colorMain: #fb001a;

	position: fixed;
	z-index: 9999;

	font-size: 1.6rem;
	font-family: 'Cascadia Code';




	[show-button] {
		position: fixed;
		top: 10rem;
		left: 0rem;

		padding: 0.5rem 0.5rem;

		background: white;
		border: 0.2rem solid var(--colorMain);
		border-left: none;
		border-radius: 0 0.4rem 0.4rem 0;

		font-size: 2rem;
		line-height: 2rem;
		color: var(--colorMain);

		cursor: pointer;
		user-select: none;


		&:hover {
			background: var(--colorMain);
			color: white;
		}
	}

	>dialog {
		padding: 2rem;


		border: none;
		border-radius: 0.4rem;
		outline: none;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);


		>[title] {
			border-bottom: 1px solid lightgray;
			padding-bottom: 1rem;
			margin-bottom: 1rem;

			color: var(--colorMain);
			font-size: 2rem;
			font-weight: bold;
		}

		>[sub-title] {
			margin-top: 1rem;
			margin-bottom: 1rem;

			font-size: 1.8rem;
		}

		>[formats-box] {
			display: block;

			border: 1px solid lightgray;
			border-radius: 0.4rem;

			margin-bottom: 1rem;
		}

		& [formats] {
			display: inline-block;
			vertical-align: top;

			padding: 1rem;

			line-height: 4rem;
			white-space: nowrap;

			--widthSroll: 0.5rem;

			>[title] {
				display: block;

				font-size: 1.6rem;
			}

			>select {
				display: inline-block;

				width: 36dvh;
				height: 48dvh;

				outline: none;
				border: none;

				font-size: inherit;
				font-family: inherit;

				>optgroup {
					color: var(--colorMain);

					>option {
						color: black;

						&[disabled] {
							color: lightgray;
						}
					}
				}
			}

		}

		& [oper] {
			display: inline-block;

			box-sizing: border-box;
			height: 4rem;
			line-height: 4rem;
			margin-left: 1rem;
			padding: 0rem 1rem;


			border: 2px solid var(--colorMain);
			border-radius: 0.4rem;
			outline: none;

			color: white;
			background: var(--colorMain);

			cursor: pointer;
			user-select: none;


			&:not([disable]):hover {
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
			}

			&[disable] {
				cursor: not-allowed;
				filter: brightness(0.7);
			}

			&:is(select) {
				color: var(--colorMain);
				background: white;
			}
		}

		>task {
			display: block;


			>download-box {
				display: grid;
				grid-template-columns: 240px calc(100% - (240px + 240px + 40px)) 240px 40px;
			}

			[task-title], [task-progress], [task-percent], [task-save] {
				display: inline-block;
				vertical-align: top;

				height: 4rem;

				line-height: 4rem;
				white-space: nowrap;
			}

			[task-title] {
				width: 20rem;
			}

			[task-progress] {
				width: 100%;
				appearance: none;

				&::-webkit-progress-bar {
					position: relative;

					top: 25%;
					height: 50%;

					border-radius: 0.4rem;

					background-color: lightgray;
				}

				&::-webkit-progress-value {
					border-radius: 0.4rem;

					background: var(--colorMain);
				}
			}

			[task-percent] {
				width: 20rem;
			}

			[task-save] {
				float: right;

				width: 6rem;
			}
		}
	}
}
